<script lang='ts' setup>
import { reactive, Ref, ref } from 'vue';
import MicroServiceServiceApi from '/@/api/org/bean/micro-service'

//model-form ref对象
const JxtechModelFormRef = ref();
//定义事件
const emit = defineEmits<{
    (e: 'add-success', data: any, res: any): void//保存成功回调
}>()

//定义属性
const props = defineProps({
    microServiceId: {
        type: String,
        default: ''
    },
})

const rules = {
    microServiceId: [{ required: true, message: '请输入微服务ID', trigger: 'blur' }],
    microServiceName: [{ required: true, message: '请输入微服务名称', trigger: 'blur' }],
    microServiceUrl: [{ required: true, message: '请输入微服务URL', trigger: 'blur' }],
}
//表单数据
const MicroServiceFormData: Ref<any> = ref({
    microServiceId: props.microServiceId,
})

//组件对象
const MicroServiceFormState = reactive({
    primaryKey: 'microServiceId',
    // 新增成功
    onAddSuccess: (formData: any, res: any) => {
        emit("add-success", formData, res)
    },
    // 表单回调函数
    callback: {
    }
})
// 对外提供方法
defineExpose({
    save: () => JxtechModelFormRef.value.save(),
})
</script>
<template>
    <jxtech-model-form
        ref="JxtechModelFormRef"
        :primary-key="MicroServiceFormState.primaryKey"
        :service-api="MicroServiceServiceApi"
        :form-data="MicroServiceFormData"
        :rules="rules"
        @save-success="MicroServiceFormState.onAddSuccess"
        :callback="MicroServiceFormState.callback"
    >
        <el-row>
            <el-col :span="21" :offset="1">
                <el-row>
                    <el-col :span="12">
                        <jxtech-model-form-item label="微服务ID" prop="microServiceId">
                            <el-input placeholder="请输入微服务ID" v-model="MicroServiceFormData.microServiceId"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                    <el-col :span="12">
                        <jxtech-model-form-item label="微服务名称" prop="microServiceName">
                            <el-input placeholder="请输入微服务名称" v-model="MicroServiceFormData.microServiceName"></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <jxtech-model-form-item label="微服务URL" prop="microServiceUrl">
                            <el-input
                                placeholder="请输入微服务URL"
                                v-model="MicroServiceFormData.microServiceUrl"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                show-word-limit
                                maxlength="255"
                                type="textarea"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <jxtech-model-form-item label="微服务描述" prop="microServiceDesc">
                            <el-input
                                placeholder="请输入微服务描述"
                                v-model="MicroServiceFormData.microServiceDesc"
                                :autosize="{ minRows: 2, maxRows: 4 }"
                                show-word-limit
                                maxlength="255"
                                type="textarea"
                            ></el-input>
                        </jxtech-model-form-item>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </jxtech-model-form>
</template>